<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8">
  <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的首页</title>

  <!--本地版-->
  <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
  <script src="plugins/vue_2.6.14/vue.js"></script>
  <script src="plugins/elementUI_2.15.7/index.js"></script>
  <script src="plugins/axios/axios_0_27_2.min.js"></script>
  <script src="plugins/jquery/jquery-3.3.1.min.js"></script>
  <!-- 动画框架 -->
  <link rel="stylesheet" href="plugins/animate_4.1.1/animate.min.css">

  <!-- 公共样式 -->
  <link rel="stylesheet" href="css/common/common.css">

  <!-- 引入头部 -->
  <script src="js/common/header.js"></script>
  <link rel="stylesheet" href="css/common/header.css">

  <!-- 接口地址全局变量 -->
  <script src="/js/common/jieKouAddress.js"></script>
  <!-- 全局函数 -->
  <script src="/js/common/commonMethod.js"></script>

  <!-- 当前页主样式 -->
  <link rel="stylesheet" href="css/userHome.css" />

  <!-- 图像压缩 -->
  <script src="plugins/image_compressor/image-compressor.min.js"></script>
</head>

<body>

  <div id="app">
    <!-- 公共头部 -->
    <header id="headerContent"></header>
    <!-- 左侧打开抽屉按钮 -->
    <div class="left-option y-box pointer" :style="{ left: leftOptionDrawer ? drawerWidth : '0px'}"
      @click="leftDrawerOpenController">
      <div>{{leftOptionDrawer ? "&lt;" : "&gt;"}}</div>
    </div>

    <!-- 左侧抽屉 -->
    <el-drawer title="" :size="drawerWidth" :visible.sync="leftOptionDrawer" :with-header="false" direction="ltr"
      :modal="false">
      <div class="left-drawer-content">
        <div class="title">
          请选择功能
        </div>
        <div class="option-list">
          <div class="option-item x-box pointer" v-for="item in optionList" :key="item.id"
            @click="optionActiveId = item.id">
            <div class="y-box">
              <img class="icon" :src="item.imageUrl" />
            </div>
            <div class="text y-box">{{item.text}}</div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 核心内容 -->
    <div class="container">
      <!-- 顶部 -->
      <div class="top" :style="{backgroundImage: 'url(' + vueHeader.userInfo.userAvatarURL + ')'}">
        <div class="top-content x-box">
          <div class="top-avatar y-box">
            <img class="border-clear border-circel milkbox-animate-flip" :src="vueHeader.userInfo.userAvatarURL" />
          </div>
          <div class="top-nickname y-box">
            <div class="text border-clear">{{vueHeader.userInfo.userNickname}}</div>
          </div>
        </div>
      </div>
      <div class="main">
        <el-row type="flex" justify="center">
          <el-col :xs="24" :sm="23" :md="16">
            <div class="main-in">
              <!--左侧-->
              <el-col class="left" :xs="24" :sm="5" :md="5" :lg="5" :xl="5" v-show="vueHeader.screenWidth >= 768">
                <div class="option-list">
                  <div class="option-item x-box pointer" v-for="item in optionList" :key="item.id"
                    @click="optionActiveId = item.id">
                    <div class="y-box">
                      <img class="icon" :src="item.imageUrl" />
                    </div>
                    <div class="text y-box">{{item.text}}</div>
                  </div>
                </div>
              </el-col>
              <!--右侧-->
              <el-col class="right" :xs="24" :sm="19" :md="19" :lg="19" :xl="19">
                <div class="option-main x-box">
                  <!-- 修改头像 -->
                  <div class="option-page" :class="optionActiveId == 1 ? '' : 'fold'">
                    <div class="option-avatar y-box" :class="{'milkbox-disabled': isAvatarChanging}">
                      <div class="milkbox-upload-div milkbox-dynamic-shadows"
                        :style="{'background-image': 'url(' + previewImageUrl + ')'}">
                        <input id="upload-input" class="upload-input" type="file" accept="image/*"
                          @change="inputChange" />
                        <label for="upload-input" class="center-all pointer">
                          <img src="img/添加图片.png" v-if="previewImageUrl == ''" />
                          <div class="upload-description" v-if="previewImageUrl == ''">点击选择图片</div>
                        </label>
                      </div>
                      <div class="milkbox-confirm-cancel-buttons">
                        <div class="option-button" @click="upload">上传</div>
                        <div class="option-button option-button-danger" @click="resetUserAvatar">重置头像</div>
                      </div>
                    </div>
                  </div>
                  <!-- 修改昵称 -->
                  <div class="option-page" :class="optionActiveId == 2 ? '' : 'fold'">
                    <div class="option-avatar y-box" :class="{'milkbox-disabled': isNicknameChanging}">
                      <el-form :model="nicknameFromData" :rules="nicknameFromRules" ref="nicknameForm" label-width="0px"
                        class="nickname-from">
                        <el-form-item label="" prop="userNickname">
                          <el-input type="text" placeholder="请输新的昵称" v-model="nicknameFromData.userNickname"
                            maxlength="64" show-word-limit>
                        </el-form-item>
                        </el-input>
                      </el-form>
                      <!-- <div class="avatar-controller-buttons x-box"> -->
                      <div class="milkbox-confirm-cancel-buttons">
                        <div class="option-button" @click="sendNickname('nicknameForm')">确定</div>
                        <div class="option-button option-button-danger" @click="resetForm('nicknameForm')">清除
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 我的收藏 -->
                  <div class="option-page y-box center-all" :class="optionActiveId == 3 ? '' : 'fold'">
                    <div class="option-list my-collection-list">
                      <div class="option-item x-box pointer" v-for="(item, index) in collectionOptionList"
                        @click="toHref(item.href)" :key="item.id">
                        <div class="y-box">
                          <img class="icon" :src="item.imageUrl" />
                        </div>
                        <div class="text y-box">{{item.text}}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 其他 -->
                  <div class="option-page" :class="optionActiveId == 4 ? '' : 'fold'">
                    789
                  </div>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>



    <!-- 公共尾部 -->
    <!-- <footer id="footerContent"></footer> -->
  </div>
  <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
  <script src="js/userHome.js"></script>
  <!-- 自己对动画框架的封装 -->
  <script src="js/common/commonAnimation.js"></script>
</body>

</html>